import React, { useMemo } from 'react'
import { View, Text, StyleSheet } from 'react-native-web'
import useRem from '../rem/rem'
export default function InfoMaTion() {
    let {rem,remh} = useRem()
    // styles
    const styles = useMemo(() => StyleSheet.create({
        container: {
            width: rem(375),
            height: remh(575),
            backgroundColor: '#f2f2f2',
            overflow: 'auto',
            boxSizing: 'border-box',
        },

        MessageInfo: {
            width: rem(375),
            height: rem(129),
            boxSizing: 'border-box',
            padding: rem(12),
            backgroundColor: '#fff',
            marginTop: rem(11),
        },
        textClass: {
            fontSize: rem(14),
            color: "#000",

        },
        content: {
            display: 'flex',
            width: rem(344),
            height: rem(30),
            fontSize: rem(13),
            marginLeft: rem(4),
            color: 'gray',
            alignItems: 'center'
        },
        time: {
            width: rem(139),
            height: rem(15),
            fontSize: rem(13),
            color: 'gray',
            position: 'absolute',
            marginLeft: rem(212),
            marginTop: rem(88)
        }

    }), [rem])
    // styles结束

    return (
        <View style={styles.container}>
            {
                [1, 2, 3, 4, 5, 6, 7, 8].map(item => {
                    return (
                        <View style={styles.MessageInfo}>
                            <Text style={styles.textClass}>课程消息</Text>
                            <Text style={styles.content}>新的课程马上要开始直播了，请按时上课哦~</Text>
                            <Text style={styles.time}>2020-03-04  12:30:00</Text>
                        </View>
                    )
                })
            }
        </View>
    )
}